/**
@create by hbxyxuxixiaodong，bootstrap样式重置
*/

$buttonPrimaryBgColor: #f6214b;
$buttonPrimaryHoverColor: #f6214b;
$buttonBgColor: #04091e;
$buttonHoverBgColor: #303d47;
$buttondefaultBgColor: #04091e;
$buttondefaultHoverBgColor: #303d47;
$checkboxBorderColor: #757575;
$buttonTextColor: #fff;
$formBgColor: #fff;
$buttonMarginRight: 1rem;
$textColor: #666;

.btn {
    &:focus {
        outline: none;

        &:active {
            outline: none;
        }
    }
}

.form-horizontal.form-bgcolor {
    padding: 1.9rem 1rem 1rem 1rem;
}

.form-bgcolor {
    background-color: $formBgColor;
}

.col-padding {
    padding: 1.5rem;
}

.btn.btn-primary {
    background-color: $buttonPrimaryBgColor;
    border-color: $buttonPrimaryBgColor;

    &:focus {
        outline: 0;
    }

    &:hover {
        background-color: $buttonPrimaryBgColor;
        border-color: $buttonPrimaryBgColor;
    }

    &:active {
        outline: none;
        background-color: darken($buttonPrimaryBgColor, 5%);
        border-color: darken($buttonPrimaryBgColor, 5%);
    }
}

.btn.btn-secondary {
    background-color: $buttondefaultBgColor;
    border-color: $buttondefaultBgColor;
    color: $buttonTextColor;

    &:focus {
        outline: 0;
    }

    &:hover {
        background-color: $buttondefaultHoverBgColor;
        border-color: $buttondefaultHoverBgColor;
    }

    &:active {
        outline: none;
        color: $buttonTextColor;
        background-color: darken($buttondefaultHoverBgColor, 5%);
        border-color: darken($buttondefaultHoverBgColor, 5%);
    }
}

.form-control:focus {
    border-color: $buttonBgColor;
}

.btn-margin-1rem {
    margin-right: $buttonMarginRight;
}

.margin-bottom-1rem {
    margin-bottom: 1rem !important;
}

.no-padding-left {
    padding-left: 0;
}

a {
    color: $buttonBgColor;

    &:hover {
        color: darken($buttonBgColor, 5%);
    }

    &.text-danger {
        color: #cb4a1c;

        &:hover {
            color: darken(#cb4a1c, 5%)
        }
    }

    &.list-group-item {
        color: $textColor;
    }
}

.panel-default>.card-header {
    color: $textColor;
}

//primeng and customtable style
$linkColor: #f6214b;
$linkHoverBgColor: #e8e8e8;

@mixin text-center {
    text-align: center;
}

body {
    .ui-paginator {
        margin: 0;
        @include text-center;
        padding: .125em;

        .ui-paginator-pages {
            .ui-paginator-page {
                padding: 0;
                min-width: 2em;
                color: $linkColor;
                transition: background-color 0.3s;
                border-radius: 0;

                &:hover.ui-state-active {
                    background-color: $linkColor;
                }

                &:focus {
                    outline: 0;
                }
            }

            .ui-state-active {
                color: $buttonTextColor;
                background-color: $linkColor;
            }
        }

        .ui-paginator-first,
        .ui-paginator-prev,
        .ui-paginator-next,
        .ui-paginator-last {
            color: $linkColor;
            transition: background-color 0.3s;
            min-height: 0.875em;
            min-width: 2em;
            padding: 0.5em 0.5em;
            vertical-align: middle;

            &:focus {
                outline: 0;
            }
        }
    }
}

body .ui-dropdown-panel .ui-dropdown-items .ui-dropdown-item.ui-state-highlight {
    background-color: $linkColor;
}

.ui-dropdown label.ui-dropdown-label {
    background-color: $linkColor;
}

.ui-dropdown-panel .ui-dropdown-item {
    &:hover {
        background-color: $linkHoverBgColor;
    }
}

body .ui-datatable thead th {
    &:focus.ui-state-active {
        background-color: $linkColor;
        border-color: $linkColor;
    }

    &:focus {
        outline: 0;
    }

    &.ui-state-active {
        background-color: $linkColor;
        border-color: $linkColor;
    }
}

body .ui-datatable .ui-datatable-data>tr>td {
    text-align: center
}

body .ui-datatable .ui-datatable-data tr.ui-datatable-even.ui-state-highlight {
    background-color: $linkColor;
    border-color: $linkColor;
    color: $buttonTextColor;
}

body .ui-datatable .ui-datatable-data tr.ui-state-highlight {
    background-color: $linkColor;
    border-color: $linkColor;
    color: $buttonTextColor;
}

body .ui-chkbox .ui-chkbox-box.ui-state-active {
    background-color: $linkColor;
    border-color: $linkColor;
    color: $buttonTextColor;
}

.table.table-bordered {
    thead th {
        @include text-center
    }

    tbody td {
        @include text-center
    }
}

body .ui-chkbox .ui-chkbox-box {
    border: 2px solid $checkboxBorderColor;
}